<template>
	<view>
		<video id="myVideo" :controls="false" :src="detail.file" autoplay @timeupdate="videoTimeUpdateEvent" @pause="videoPauseChange"@ended="videoEnendChange"></video>
		<view class="label-btn-box">
			<view></view>
			<view class="right-btn">
				<view class="time-box" v-if="!videoEnd && videoTime">还剩{{ videoTime }}秒</view>
				<view class="time-box" v-else @click.stop="navBack">关闭</view>
				<view class="close-img" @tap="closePage">
					<image src="/static/images/shop/close.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoContext: '',
				detail: {},
				isPlay: false,
				videoType: 1,
				clearInNer: null,
				videoTime: 5,
				videoEnd: false,
				
			}
		},
		onLoad() {
			this.init();
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo');
			this.videoContext.play();
		},
		methods: {

			//获取视频
			init() {
				this.$api.get({
					url: '/user/getAdvertising',
					success: res => {
						this.detail = res;
					}
				});
			},
			// 监听视频进度变化
			videoTimeUpdateEvent() {
				let { isPlay, videoType } = this
				if(!isPlay && videoType ) {
					this.isPlay = true;
					this.timeChange()
				}
			},
			
			//监听视频暂停
			videoPauseChange() {
				this.isPlay = true
				this.videoType = 0;
			},
			//视频播放结束
			videoEnendChange() {
				clearInterval(this.clearInNer)
				this.videoEnd = true
			},
			timeChange() {
				this.clearInNer = setInterval(() => {
					--this.videoTime
					if(this.videoTime == 0) {
						this.videoEnd = true;
						clearInterval(this.clearInNer)
					}
				}, 1000)
			},

			//关闭视频
			async closePage() {
				let that = this;
				that.videoContext.pause()
				clearInterval(this.clearInNer)
				this.clearInNer = null
				let { videoTime, videoEnd } = this;
				if(videoEnd || !videoTime) return this.navBack();
				uni.showModal({
					title: "关闭视频？",
					content: "您将会无法领取好人值",
					cancelText: '关闭视频',
					confirmText: '继续播放',
					success(res) {
						if (res.confirm) {
							//继续播放
							that.videoType = 1;
							that.isPlay = false;
							that.videoContext.play()
						} else if (res.cancel) {
							uni.navigateBack()
						}
					}
				})
			},
			navBack() {
				let { videoTime, videoEnd } = this;
				if(videoEnd || !videoTime) this.$api.get({url: '/user/thawHaoren'});
				uni.navigateBack()
			},
			
		}
	}
</script>

<style scoped>
	#myVideo {
		width: 100vw;
		height: 100vh;
	}

	.label-btn-box {
		width: 100%;
		height: 76rpx;
		top: 50rpx;
		left: 0;
		position: absolute;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.right-btn {
		width: 250rpx;
		height: 76rpx;
		position: relative;
	}

	.time-box {
		width: 100%;
		height: 100%;
		background: #fafafa;
		border-radius: 50rpx;
		padding-left: 40rpx;
		box-sizing: border-box;
		display: flex;
		font-size: 30rpx;
		font-weight: 500;
		align-items: center;
	}

	.close-img {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		box-shadow: #E4E4E4 0 0 10rpx;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 10rpx;
	}

	.close-img image {
		width: 100%;
		height: 100%;
	}
</style>
